<template>
	<div class="content">
		<u-tabs-swiper 
			ref="uTabs" 
			:list="list" 
			:current="current" 
			@change="tabsChange" 
			:is-scroll="false" 
			swiperWidth="750">
		</u-tabs-swiper>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<div class="top">
					<u-button @click="addShow" size="mini" type="primary">添加车辆类型</u-button>
				</div>
				<view class="container u-skeleton">
					<u-table>
						<u-tr>
							<u-th>ID</u-th>
							<u-th>名称</u-th>
							<u-th>操作</u-th>
						</u-tr>
						<u-tr v-for="item in carType" :key='item.id' >
							<u-td>{{item.id}}</u-td>
							<u-td>{{item.name}}</u-td>
							<u-td v-if="!loading">
								<div class="btn">
									<u-button size="mini" type="primary">修改</u-button>
									<u-button size="mini" type="warning">删除</u-button>
								</div>
							</u-td>
						</u-tr>
					</u-table>
					<div class="page">
						<u-button size="mini" @click="prev" type="primary">上一页</u-button>
						<p>第({{page}})页 共{{pages}}页</p>
						<u-button size="mini" @click="next" type="primary">下一页</u-button>
					</div>
					<u-empty  class="u-skeleton-rect" style="margin-top: 20rpx;" text="数据为空" mode="list"></u-empty>
				</view>
				<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
			</swiper-item>
			<swiper-item class="swiper-item">
				<div class="top">
					<u-button size="mini" type="primary">添加价格</u-button>
				</div>
				<view class="container u-skeleton">
					<u-table class="u-skeleton-rect">
						<u-tr>
							<u-th>车辆类型</u-th>
							<u-th>号牌种类</u-th>
							<u-th>长度</u-th>
							<u-th>价格</u-th>
							<u-th>操作</u-th>
						</u-tr>
						<u-tr>
							<u-td>浙江大学</u-td>
							<u-td>二年级</u-td>
							<u-td>二年级</u-td>
							<u-td>
								<u-button size="mini" type="primary">修改</u-button>
							</u-td>
						</u-tr>
						
					</u-table>
					<u-empty  class="u-skeleton-rect" style="margin-top: 20rpx;" text="数据为空" mode="list"></u-empty>
				</view>
				<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
			</swiper-item>
		</swiper>
		<u-popup v-model="show" mode="bottom">
			<div class="add">
				<u-cell-group>
					<u-field
						v-model="value"
						label="value"
						placeholder="value自动生成"
						:disabled='true'
					>
					</u-field>
					<u-field
						@confirm='changeValue'
						v-model="name"
						label="车辆类型"
						placeholder="请填写车辆类型"
					>
					</u-field>
					<u-button :loading='sLoading' type="primary" @click="addData">提交</u-button>
				</u-cell-group>
			</div>
		</u-popup>
		<u-toast ref="uToast" />
	</div>
</template>
<script>
	export default {
		data(){
			return{
				loading:true,
				carType:[],
				page:1,
				pages:null,
				show:false,
				value:null,
				name:null,
				sLoading:false,
				list: [{
					name: '车辆类型'
				}, {
					name: '价格'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			}
		},
		onShow() {
			this.getData()
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			getData(){
				uni.request({
				    url: this.$api.queryDataDir, //仅为示例，并非真实接口地址。
				    data: {
				        page:this.page,
						pageSize:10
				    },
				    success: (res) => {
						this.loading = false
				        console.log(res);
				        if(res.data.data.list.length && res.statusCode == 200){
							this.carType = res.data.data.list
							this.pages = res.data.data.pages
							console.log('carType----------',this.carType)
						}else{
							this.loading = false
						}
				    },
					fail: (err) => {
						this.loading = false
						console.log(err)
					}
				});
			},
			changeValue(){
				this.sLoading = true
				uni.request({
					url:this.$api.changeValue,
					data:{
						name:this.name
					},
					success: (res) => {
						this.sLoading = false
						console.log(res)
						this.value = res.data.data.value
					},
					fail: (err) => {
						this.sLoading = false
						console.log(err)
					}
				})
			},
			//打开弹窗
			addShow(){
				this.show = true
			},
			async addData(){
				this.sLoading = true
				if(this.value){
					uni.request({
						url:this.$api.addDataDir,
						data:{
							name:this.name,
							value:this.value
						},
						success: (res) => {
							this.sLoading = false
							console.log(res)
							if(res.data.status == 200){
								this.$refs.uToast.show({
									title: '添加成功'
								})
								this.show = false
							}
							
						},
						fail: (err) => {
							this.sLoading = false
							this.$refs.uToast.show({
								title: '添加失败'
							})
							console.log(err)
						}
					})
				}else{
					this.sLoading = false
					this.$refs.uToast.show({
						title: 'value未生成'
					})
				}
				
			 
			},
			//上一页
			prev(){
				if(this.page <= 1){
					this.$refs.uToast.show({
						title: '已经是第一页了'
					})
				}else{
					this.loading = true
					this.page = this.page - 1
					this.getData()
				}
			},
			//下一页
			next(){
				if(this.page >= this.pages){
					this.$refs.uToast.show({
						title: '已经是最后一页了'
					})
				}else{
					this.loading = true
					this.page = this.page + 1
					this.getData()
				}
			}
		}
	}
	
</script>
<style lang="less">
	.content{
		.top{
			margin: 40rpx 20rpx 20rpx 20rpx;
			button{
				margin-right: 20rpx;
			}
		}
		.btn{
			display: flex;
		}
		.page{
			display: flex;
			margin: 20rpx auto;
			justify-content: center;
		}
		.add{
			padding: 40rpx 0;
			button{
				margin-top: 30rpx;
			}
		}
		uni-swiper {
		    height: 95vh;
		}
	}
</style>